<template>
	<view class="content-box">
		<view class="hint" v-if="!user.driverLevelName">
			您还未支付保证金
		</view>
		<view class="hint_">
			高等级车型可以抢低等级车型的订单
		</view>
		<view class="hint_">
			低等级车型不能抢高等级车型的订单
		</view>
		<view class="title" style="margin-top: 64rpx;">
			当前等级
		</view>
		<view class="" style="text-align: center;display: flex;align-items: center;justify-content: center;">
			<image src="/static/me/line.png" style="width: 24rpx;height: 10rpx;" mode=""></image>
			<text style="padding: 0 14rpx;">{{user.driverLevelName||'暂无等级'}}</text>
			<image src="/static/me/line.png" style="width: 24rpx;height: 10rpx;" mode=""></image>
		</view>
		<image v-if="user.image" :src="$imageUrl(user.image)" mode="widthFix" style="width: 262rpx;margin: 28rpx auto;display: block;"></image>
		<view class="" style="font-size:28rpx;color:#FFCE4E;text-align: center;font-weight: bold;">
			已支付保证金￥{{user.driverDeposit||0}}
		</view>
		<view class="transport-mode-box">
			<view class="title">
				可升级车型
			</view>
			<view class="transport-mode-item" :class="{'transport-mode-active':carIndex==index}" v-for="(item, index) in carList" @click="carIndex=index">
				<image class="img" :src="$imageUrl(item.image)" mode=""></image>
				<view class="name">
					<view class="">
						{{item.name}}
					</view>
					<view class="">
						{{item.descDriver}}
					</view>
				</view>
				<view class="money-text">
					保证金差价<text>{{item.priceDifference}}</text>元
				</view>
				<view class="select-box" :class="{'select-box-active':carIndex==index}" style="margin-left: 14rpx;">
					<u-icon name="checkbox-mark" color="#ffffff"></u-icon>
				</view>
			</view>
			
			<u-empty
			v-if="carList.length===0"
			        text="无可升级车型"
			        icon="http://cdn.uviewui.com/uview/empty/search.png"
			>
			</u-empty>
		</view>
		
		<view class="upgrade-btn" v-if="carIndex!=-1" :class="{'upgrade-active':carList.length==0}" @click="upgradeSubmit">
			升级车型 <text v-if="carList[carIndex].priceDifference">￥{{carList[carIndex].priceDifference}}</text> 
		</view>
		<view class="back-btn" v-if="user.driverLevel" @click="$routeTo('/pages/me/upgradeVehicle/backCashPledge/backCashPledge')">
			<text>退回保证金</text>
		</view>
		
		<Loading/>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				carList:[],
				carIndex:-1
			}
		},
		mounted() {
			this.upData()
		},
		methods: {
			upData(){
				this.$myRequest('/api/driver/mine/v1/depositQuery').then(res=>{
					this.user=res.data
					this.carList=res.data.upgradableList
				})
			},
			upgradeSubmit(){
				let that=this
				this.$myRequest('/api/driver/mine/v1/upgraded/carModel',{
					id:this.carList[this.carIndex].id,
					priceDifference:this.carList[this.carIndex].priceDifference
				},'POST').then(res=>{
					this.$myRequest('/api/driver/mine/v1/payFor',{
						orderId:res.data
					},'POST').then(ress=>{
						let data=ress.data
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr: data.nonceStr,
							package: data.package,
							paySign: data.paySign,
							signType: data.signType,
							timeStamp: data.timeStamp,
							success: function(res) {
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								});
								that.upData()

							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						})
					})
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.content-box{
		padding-bottom: 100rpx;
		.hint{
			height: 64rpx;
			background: linear-gradient(129deg, #FFFFFF 0%, #FFFAD6 49%, #FFFFFF 100%);
			font-size: 24rpx;
			text-align: center;
			line-height: 64rpx;
			color: #FF9472;
			margin-bottom: 16rpx;
		}
		.hint_{
			font-size: 28rpx;
			color: #666666;
			text-align: center;
		}
		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
			margin: 0 20rpx 16rpx 20rpx;
		}
		.transport-mode-box {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx 0;
			margin-top: 20rpx;
		
			
		
		
		}
		.transport-mode-item ,.pay-item{
			margin: 10rpx 20rpx;
			display: flex;
			align-items: center;
			padding: 18rpx 20rpx;
			border-radius: 14rpx;
		
			.img {
				width: 96rpx;
				height: 84rpx;
				margin-right: 10rpx;
			}
		
			.name {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				height: 94rpx;
		
				view:nth-child(2) {
					font-size: 26rpx;
					color: #666666;
					font-weight: 100;
				}
			}
		
			.money-text {
				font-size: 26rpx;
				color: #666666;
		
				text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		
		}
		.transport-mode-active,.pay-active {
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 206, 78, 0.05) 13%, rgba(255, 206, 78, 0.15) 100%);
		}
		.select-box {
				width: 40rpx;
				height: 40rpx;
				border-radius: 14rpx;
				background-color: #DCDCDC;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.select-box-active{
				background-color: $theme-color;
			}
			
		.upgrade-btn{
			width: 338rpx;
			height: 80rpx;
			background: $theme-color;
			border-radius: 40rpx;
			text-align: center;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			margin: 300rpx auto 20rpx auto;
		}
		.upgrade-active{
			filter: grayscale(100%);
		}
		.back-btn{
			color: $theme-color;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>
